<script setup lang="ts">
	import navbar from '@/wxcomponents/navbar'
	import { reactive, ref } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { addresslist, deleteaddress, editaddress } from "@/api/user";
	let list = ref([]);
	let buytype = ref(false);
	function goBack() {
		uni.navigateBack({
			delta: 1,
		});
	}
	function addaddress() {
		uni.navigateTo({
			url: "/pages/subPackage/address/add",
		});
	}
	function getaddresslist() {
		var obj = {
			page: 1,
			size: 20,
		};
		addresslist(obj).then((res) => {
			console.log(res.data.items);
			list.value = res.data.items;
			console.log(res);
		});
	}
	onShow(() => {
		getaddresslist();
	});
	function editad(e) {
		uni.navigateTo({
			url: "/pages/subPackage/address/add?id=" + e.id,
		});
	}
	function deletead(id : number) {
		deleteaddress({ id: id }).then((res) => {
			getaddresslist();
		});
	}
	function shemoren(index) {
		console.log(list.value[index]);
		if (list.value[index]["is_default"]) {
			list.value[index]["is_default"] = 0;
		} else {
			list.value[index]["is_default"] = 1;
		}
		editaddress(list.value[index]).then((res) => {
			getaddresslist();
		});
	}
	onLoad((option) => {
		if (option.type) {
			buytype.value = true;
		}
		getaddresslist();
	});
	function selectaddress(item) {
		if (buytype.value) {
			uni.$emit("addressselect", item);
			goBack();
		}
	}
</script>

<template>
	<view class="content1">
		<navbar title="收货地址" @goBack="goBack"></navbar>
		<view style="padding-bottom: 100rpx" class="package-box padding24-all">
			<view class="bg-block2e padding24-all list graya1" v-for="(e, index) in list" :key="e.id"
				:class="[e.is_default?'soild':'']">
				<view class="top flex flex-row justify-content-bt" @click="selectaddress(e)">
					<view class="flex r_content">

						<view class="fsize32 white r_name">
							<image src="/static/owo/gselect.png" class="gselect" v-if="e.is_default"></image>
							{{ e.username }}<text class="phone">{{ e.phone }}</text>
						</view>
						<text
							class="address">{{ e.province==e.city ?e.province: e.province + e.city }}{{ e.region }}{{ e.address }}</text>
					</view>
				</view>
				<view class="flex flex-row justify-content-bt" style="align-items: center">
					<!-- <view class="fsize28 flex flex-row" style="align-items: center; padding-top: 32rpx"
						@click="shemoren(index)">
						<image class="select" mode="widthFix" src="/static/owo/gselect.png" v-if="e.is_default"></image>
						<image class="select" mode="widthFix" src="/static/owo/select.png" v-else>
						</image>
						<text>默认地址</text>
					</view> -->
					<view class="flex bottom_btn fsize28">
						<view class="flex flex-row btn" @click="editad(e)">
							<!-- <image class="edit" src="/static/owo/edit.png"></image> -->
							<text>编辑</text>
						</view>
						<view class="flex flex-row btn" @click="deletead(e.id)">
							<!-- <image class="edit" src="/static/owo/delete.png"></image> -->
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-page" v-if="!list.length">
			<view class="nofull">
				<image src="/static/owo/addressnull.png" class="nofullimg"></image>
				<text class="graya1">这里空空如也~快新建地址吧~</text>
			</view>
		</view>
		<view style="text-align: center" class="addbtn" @click="addaddress">
			<image class="btntext" src="/static/owo/address-confirm-btn.png"></image>
		</view>
	</view>
</template>

<style lang="scss">
	page {
		// background-color: #0a050b;
	}

	@import "src/static/scss/common";

	.nofullimg {
		width: 362rpx;
		height: 212rpx;
		margin-bottom: 30rpx;
	}

	.package-box {
		padding-top: 24rpx;
	}

	.addbtn {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 60rpx;
		z-index: 3;

		.btntext {
			width: 100%;
			height: 84rpx;
			// background-image: url("/static/owo/address-confirm-btn.png");
			// background-position: 0;
			// background-repeat: no-repeat;
			// background-size: cover;
		}
	}

	.list {
		margin-bottom: 20rpx;
		border: solid 0.5px #fffffd;

		.top {
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 22rpx;
			}

			.r_content {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-bottom: 32rpx;

				.r_name {
					display: flex;
					flex-direction: row;
					align-items: center;

					.gselect {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}
				}

				.phone {
					margin-left: 16rpx;
				}

				.address {
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.65);
					margin-top: 16rpx;
					word-wrap: break-word;
					/* 旧版本浏览器支持 */
					overflow-wrap: break-word;
				}
			}
		}

		.bottom_btn {
			flex: 1;
			justify-content: flex-end;
			.btn {
				margin-left: 30rpx;
				align-items: center;
				color: #FFFFFF;
				padding: 6rpx 16rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				background-color: #18181C;

				.edit {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	.soild {
		border: solid 0.5px #FFDD86;
	}

	.app-container {
		//display: flex;
		padding: 0 15rpx 0 15rpx;
		//flex-direction: column;
	}

	.select {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	view {
		box-sizing: border-box;
	}

	.bradius10 {
		border-radius: 10rpx;
	}

	.bradius20 {
		border-radius: 20rpx;
	}

	.bradius30 {
		border-radius: 30rpx;
	}

	.bradius50 {
		border-radius: 50%;
	}

	.padding24-all {
		padding: 24rpx;
	}

	.padding16 {
		padding: 16rpx;
	}

	.padding24 {
		padding: 0 24rpx;
	}

	.padding32-top-bt {
		padding: 32rpx 0;
	}

	.padding24-top {
		padding-top: 24rpx;
	}

	.padding20-top {
		padding-top: 20rpx;
	}

	.margin16_top {
		margin-top: 16rpx;
	}

	.margin48_top {
		margin-top: 48rpx;
	}

	.margin40_top {
		margin-top: 40rpx;
	}

	.margin32_top {
		margin-top: 32rpx;
	}

	.margin24_top {
		margin-top: 24rpx;
	}

	.margin23_top {
		margin-top: 23rpx;
	}

	.margin20_top {
		margin-top: 20rpx;
	}

	.margin14_top {
		margin-top: 14rpx;
	}

	.margin12_top {
		margin-top: 12rpx;
	}

	.margin40_bt {
		margin-bottom: 40rpx;
	}

	.margin24_bt {
		margin-bottom: 24rpx;
	}

	.margin16_bt {
		margin-bottom: 16rpx;
	}

	.flex {
		display: flex;
	}

	.flex-row {
		flex-direction: row;
	}

	.justify-content-bt {
		justify-content: space-between;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.bg-block2e {
		background-color: #42424E;
	}

	.bg-F4 {
		background-color: #f4f4f4;
	}

	.maincolor {
		color: #baff00;
	}

	.black333 {
		color: #333333;
	}

	.gray999 {
		color: #999999;
	}

	.grayaaa {
		color: #aaaaaa;
	}

	.grayD8 {
		color: #cfd1d8;
	}

	.white {
		color: white;
	}

	.red {
		color: #ff1e1e;
	}

	.gray999 {
		color: #999999;
	}

	.blue {
		color: #2784ff;
	}

	.graya1 {
		color: #a1a1a1;
	}

	.gray66 {
		color: #666666;
	}

	.fsize56 {
		font-size: 56rpx;
	}

	.fsize48 {
		font-size: 48rpx;
	}

	.fsize44 {
		font-size: 44rpx;
	}

	.fsize42 {
		font-size: 42rpx;
	}

	.fsize40 {
		font-size: 40rpx;
	}

	.fsize36 {
		font-size: 36rpx;
	}

	.fsize32 {
		font-size: 32rpx;
	}

	.fsize28 {
		font-size: 28rpx;
	}

	.fsize24 {
		font-size: 24rpx;
	}

	.fsize22 {
		font-size: 22rpx;
	}

	.fsize20 {
		font-size: 20rpx;
	}

	.fsize18 {
		font-size: 18rpx;
	}

	.fweight600 {
		font-weight: 600;
	}

	.fweight500 {
		font-weight: 500;
	}
</style>